<template>
    <div>
        <Card>
            <p slot="title" class="card-title">
                <Icon type="home"></Icon>
                <span>日志管理</span>
            </p>
            <div>
                <template>
                    <Row>
                        <Col span="15" class="margin-bottom-10">
                            <Button :disabled="setting.loading" type="success" @click="getData"><Icon type="refresh"></Icon>&nbsp;刷新数据</Button>
                            <Button :disabled="selections.length==0 || setting.loading" type="error" @click="removeList(false)"><Icon type="trash-a"></Icon>&nbsp;批量删除所选</Button>
                            <Button type="primary" @click="exportData(1)"><Icon type="ios-download-outline"></Icon>&nbsp;导出表格</Button>
                        </Col>
                    </Row>
                    <Table ref="table"  class="margin-bottom-10" @on-selection-change="selectionChange"
                         :columns="columns" :loading="setting.loading"  :border="setting.showBorder" :data="data.records"></Table>
                    <Page :total="data.total" class="tr" @on-change="pageChange" :current.sync="data.current" :page-size="data.size"
                      @on-page-size-change="pageSizeChange" show-elevator show-sizer></Page>
                </template>
            </div>
        </Card>
        <Modal v-model="removeModal" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>提示</span>
            </p>
            <div style="text-align:center">
                <p>此操作为不可逆操作，是否确认删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="setting.loading">确认删除</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import dayjs from 'dayjs'
    import { post } from '@/libs/axios-cfg'
    export default {
        data () {
            return {
                selections:[],
                removeModal:false,
                setting:{
                    loading:true,
                    showBorder:true
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {title: '用户ID', key: 'uid'},
                    {title: '用户名', key: 'username'},
                    {title: '动作名称', key: 'actionName'},
                    {title: 'IP', key: 'ip',render:(h,params)=>{
                        let ip = params.row.ip;
                        let ipSplit = ip.split(".")
                        if(ipSplit.length==4){
                            return h('span',ipSplit[0]+'.'+'***'+'.'+ipSplit[2]+'.'+ipSplit[3])
                        }
                        return h('span',ip)
                    }},
                    {title: '请求类型', key: 'ajax',render:(h,params)=>{
                        return h('span',params.row.ajax == 0 ? '普通请求' : 'AJAX请求')
                    }},
                    {title: '请求地址', key: 'uri'},
                    {title: '请求参数', key: 'params'},
                    {title: '请求方法', key: 'httpMethod'},
                    {title: '类.方法', key: 'classMethod'},
                    {
                        title: '创建日期',
                        key: 'createDate',
                        render:(h,params)=>{
                            return h('span',dayjs(params.row.createDate).format('YYYY年MM月DD日 HH:mm:ss'))
                        },
                        sortable: true
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {type: 'error' ,size: 'small'},
                                    style: {marginRight: '5px'},
                                    on:{
                                        click:()=>{
                                            this.removeList(params.row.id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: {},
                dataFilter:{
                    page:1,
                    pageSize:10
                },
                removeObject:null
            }
        },
        created(){
            this.getData();
        },
        methods:{
            /**
             * @description 批量选择回调
             */
            selectionChange(list){
                this.selections = list;
            },
            /**
             * @description 分页更换事件回调
             */
            pageChange(p){
                this.dataFilter.page = p;
                this.getData();
            },
            /**
             * @description 分页每页显示数量改变事件回调
             */
            pageSizeChange(p){
                this.dataFilter.pageSize = p;
                this.getData();
            },
            /**
             * @description 获取用户列表
             */
            async getData(){
                this.setting.loading = true;
                try {
                    let res = await post('/system/log/list',{
                        page:this.dataFilter.page,
                        pageSize:this.dataFilter.pageSize
                    })
                    this.data = res.data;
                } catch (error) {
                    this.$throw(error)
                }
                this.setting.loading = false;
            },
            /**
             * @description 批量删除
             */
            async removeList(single = false){
                this.setting.loading = true;
                this.$Message.loading({
                    content:"日志删除中...",
                    duration:0
                });
                let objs = []
                if(single){
                    objs.push(single)
                }else{
                    this.selections.forEach(el=>{
                        objs.push(el.id)
                    })
                }
                try {
                    let res = await post('/system/log/remove',objs);
                    this.getData();
                    this.selections = [];
                    this.$Message.destroy()
                    this.$Message.success({
                        content:"日志删除成功",
                        duration: 1.5
                    });
                } catch (error) {
                    this.$throw(error)
                }
                this.setting.loading = false;
            },
            /**
             * @description 导出表格CSV
             */
            exportData(type){
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: '日志数据-'+new Date().getTime(),
                        columns: this.columns.filter((col, index) => index > 0 && index < this.columns.length-1),
                        data: this.data.records
                    });
                }
            }
        }
    }
</script>